<template>
  <div class="task-column-container">
    <task-card
      v-for="(card, index) in task_column_setting"
      :key="index"
      :TaskCardSettings="card"
      class="card"
    ></task-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import TaskCard from './TaskCard.vue'
import { TaskCardType } from '@/interface/Basic'
import { deepClone } from '@/utils/specificFunc'
@Component({
  components: {
    TaskCard
  }
})
class TaskColumn extends Vue {
  @Prop({ required: true }) TaskColumnSettings!: TaskCardType[]
  task_column_setting: TaskCardType[] = []
  mounted() {
    this.task_column_setting = deepClone(this.TaskColumnSettings)
  }
}
export default TaskColumn
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.task-column-container {
  width: 100%;
  overflow: auto;
  .card {
    margin-bottom: 20px;
  }
}
::-webkit-scrollbar {
  width: 0;
}
::-webkit-scrollbar-thumb {
  #color(background-color, --primary-hover-text-color);
}
</style>
